<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="shortcut icon" href="/static/images/logo.png" type="image/x-icon">
    <meta name="description" content="Responsive Bootstrap HTML Mobile Application Template - Free Download">
    <title></title>
    <link rel="stylesheet"
          href="https://fonts.googleapis.com/css?family=Lora:400,700,400italic,700italic&amp;subset=latin">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Montserrat:400,700">
    <link rel="stylesheet"
          href="https://fonts.googleapis.com/css?family=Raleway:100,100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i">
    <link rel="stylesheet" href="/static/css/material.css">
    <link rel="stylesheet" href="/static/css/mobirise-icons.css">
    <link rel="stylesheet" href="/static/css/et-line-font-style.css">
    <link rel="stylesheet" href="/static/css/tether.min.css">
    <link rel="stylesheet" href="/static/css/bootstrap.min.css">
    <link rel="stylesheet" href="/static/css/style.css">
    <link rel="stylesheet" href="/static/css/animate.min.css">
    <link rel="stylesheet" href="/static/css/theme-style.css">
    <link rel="stylesheet" href="/static/css/mbr-additional.css" type="text/css">
    <link href="https://cdn.bootcdn.net/ajax/libs/bootstrap-validator/0.5.3/css/bootstrapValidator.css"
          rel="stylesheet">
    <link href="https://cdn.bootcdn.net/ajax/libs/bootstrap-validator/0.5.3/css/bootstrapValidator.min.css"
          rel="stylesheet">
</head>
<script>
    function save() {
        const team_name = $("#team_name").val();
        const safeLane = $("#safeLane").val();
        const midLane = $("#midLane").val();
        const offLane = $("#offLane").val();
        const support = $("#support").val();
        const hardSupport = $("#hardSupport").val();
        const data1 = {
            "name": team_name,
            "safeLane": safeLane,
            "midLane": midLane,
            "offLane": offLane,
            "support": support,
            "hardSupport": hardSupport
        };
        $.ajax({
            type: "POST",
            dataType: "json",//通过GET方式上传请求
            contentType: "application/json",//上传内容格式为json结构
            data: JSON.stringify(data1),                                //上传的参数
            async: false,
            url: "team/saveAjax",     //请求的url。与后端@Request Mapping注解中的值一致。
            success: function (data) {
                refresh();
            },
            error: function (e) {           //请求失败的回调函数
                console.log(e);
            }
        });
    }

    function refresh() {
        const url = "/team/find";
        $("#team_fresh_id").load(url);
    }

    function del(teamId) {
        $.ajax({
            type: "POST",
            dataType: "json",//通过GET方式上传请求
            contentType: "application/json",//上传内容格式为json结构
            data: JSON.stringify(teamId),                                //上传的参数
            async: false,
            url: "team/delAjax",     //请求的url。与后端@Request Mapping注解中的值一致。
            success: function (data) {
                refresh();
            },
            error: function (e) {           //请求失败的回调函数
                console.log(e);
            }
        });
    }
</script>

<body onload="refresh()">
<div id="menu-0" custom-code="true">
    <section>
        <nav class="navbar navbar-dropdown bg-color transparent navbar-fixed-top">
            <div class="container">
                <div class="mbr-table">
                    <div class="mbr-table-cell">
                        <a class="navbar-caption" href="./index.html">白鸽杯</a>
                    </div>
                    <div class="mbr-table-cell">
                        <button class="navbar-toggler pull-xs-right hidden-md-up" type="button" data-toggle="collapse"
                                data-target="#exCollapsingNavbar">
                            <div class="hamburger-icon"></div>
                        </button>
                        <ul class="nav-dropdown collapse pull-xs-right nav navbar-nav navbar-toggleable-sm"
                            id="exCollapsingNavbar">
                            <li class="nav-item"><a class="nav-link link mbr-editable-menu-item"
                                                    href="index.html#header3-k">赛事详情</a></li>
                            <li class="nav-item"><a class="nav-link link mbr-editable-menu-item"
                                                    href="index.html#pricing-table2-f">报名</a></li>
                        </ul>
                        <button hidden="" class="navbar-toggler navbar-close" type="button" data-toggle="collapse"
                                data-target="#exCollapsingNavbar">
                            <div class="close-icon"></div>
                        </button>
                    </div>
                </div>
            </div>
        </nav>
    </section>
    <section class="mbr-section mbr-section-hero mbr-section-full header2 mbr-parallax-background mbr-after-navbar"
             id="header2-1" style="background-image: url(/static/images/bg2-2000x1500.jpg);">
        <div class="mbr-overlay" style="opacity: 0.3; background-color: rgb(71, 85, 119);">
        </div>
        <div class="mbr-table mbr-table-full">
            <div class="mbr-table-cell">
                <div class="container">
                    <div class="mbr-section row">
                        <div class="mbr-table-md-up">
                            <div class="mbr-table-cell col-md-5 content-size text-xs-center text-md-right">
                                <h3 class="mbr-section-title display-2">第一届白鸽杯DOTA2联赛</h3>
                                <div class="mbr-section-text">
                                    <p> 由Ah战队的bai' 猪猪 'yuxuan独家赞助&nbsp;</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

            </div>
        </div>
        <div class="mbr-arrow mbr-arrow-floating hidden-sm-down" aria-hidden="true"><a href="#header3-k"><i
                class="mbr-arrow-icon"></i></a></div>
    </section>

    <section class="mbr-section mbr-section__container article" id="header3-k"
             style="background-color: rgb(244, 244, 244); padding-top: 60px; padding-bottom: 0;">
        <div class="container">
            <div class="row">
                <div class="col-xs-12">
                    <h3 class="mbr-section-title display-2">赛事详情</h3>
                </div>
            </div>
        </div>
    </section>

    <section class="mbr-section article mbr-section__container" id="content1-j"
             style="background-color: rgb(244, 244, 244); padding-top: 20px; padding-bottom: 20px;">
        <div class="container">
            <div class="row">
                <div class="col-xs-12 lead">由AiHai Gaming战队发起的路人战队娱乐比赛，参加比赛的选手们可以在下图二维码扫描进群去组队，
                    然后以团队的方式报名参加。&nbsp;
                </div>
            </div>
        </div>
    </section>

    <section class="mbr-cards mbr-section mbr-section-nopadding" id="features1-e"
             style="background-color: rgb(244, 244, 244);">
        <div class="mbr-cards-row row">
            <div class="mbr-cards-col col-xs-12 col-lg-4" style="padding-top: 80px; padding-bottom: 80px;">
                <div class="container">
                    <div class="card cart-block">
                        <div class="card-img iconbox"><a href="#"
                                                         class="mbri-hearth mbr-iconfont mbr-iconfont-features4"
                                                         style="color: rgb(233, 165, 211);"></a></div>
                        <div class="card-block">
                            <h4 class="card-title">比赛赛制</h4>
                            <p class="card-text">类似于勇士联赛的淘汰赛制，我们每一届比赛8支队伍参赛，采取BO1双败淘汰</p>

                        </div>
                    </div>
                </div>
            </div>
            <div class="mbr-cards-col col-xs-12 col-lg-4" style="padding-top: 80px; padding-bottom: 80px;">
                <div class="container">
                    <div class="card cart-block">
                        <div class="card-img iconbox"><a href="#"
                                                         class="mbri-globe-2 mbr-iconfont mbr-iconfont-features4"
                                                         style="color: rgb(39, 170, 224);"></a></div>
                        <div class="card-block">
                            <h4 class="card-title">赛事奖励</h4>
                            <p class="card-text">暂无</p>

                        </div>
                    </div>
                </div>
            </div>
            <div class="mbr-cards-col col-xs-12 col-lg-4" style="padding-top: 80px; padding-bottom: 80px;">
                <div class="container">
                    <div class="card cart-block">
                        <div class="card-img iconbox"><a href="#"
                                                         class="mbri-smile-face mbr-iconfont mbr-iconfont-features4"
                                                         style="color: rgb(193, 193, 193);"></a></div>
                        <div class="card-block">
                            <h4 class="card-title">备注</h4>
                            <p class="card-text">友谊第一，比赛第二。为没有很多时间打Dota2的水友们一个比赛的机会</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <section class="mbr-section" id="msg-box4-6"
             style="background-color: rgb(255, 255, 255); padding-top: 120px; padding-bottom: 120px;">
        <div class="container">
            <div class="row">
                <div class="mbr-table-md-up">
                    <div class="mbr-table-cell col-md-5 text-xs-center text-md-right content-size">
                        <h3 class="mbr-section-title display-2">扫描二维码</h3>
                        <div class="lead">
                            <p>组队完成后在下方报名参赛</p>
                        </div>
                    </div>
                    <div class="mbr-table-cell mbr-left-padding-md-up mbr-valign-top col-md-7 image-size"
                         style="width: 50%;">
                        <div class="mbr-figure">
                            <div class="card-img"><img src="/static/images/interface-screenshot3.jpg"
                                                       class="card-img-top" alt="">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <section class="mbr-section" id="pricing-table2-f"
             style="background-color: rgb(255, 255, 255); padding-top: 120px; padding-bottom: 120px;">
        <div class="mbr-section mbr-section__container mbr-section__container--middle">
            <div class="container">
                <div class="row">
                    <div class="col-xs-12 text-xs-center">
                        <h3 class="mbr-section-title display-2">填写报名信息</h3>
                        <small class="mbr-section-subtitle">请认真填写自己的数字id</small>
                    </div>
                </div>
            </div>
        </div>
        <div class="mbr-section mbr-section-nopadding mbr-price-table">
            <div class="row">
                <div class="col-xs-12 col-md-6 col-xl-12">
                    <div class="mbr-plan card text-xs-center">
                        <div class="mbr-plan-body card-block">
                            <div class="mbr-plan-list">
                                <form name="form_team">
                                    <div class="form-group">
                                        <div class="col-xs-2" style="color:#1a1a1a">
                                            <label for="team_name">战队名称</label>
                                            <input type="text" class="form-control" placeholder="名称" id="team_name"
                                                   th:name="team_name">
                                        </div>
                                        <div class="col-xs-2" style="color:#1a1a1a">
                                            <label for="safeLane">一号位</label>
                                            <input type="text" class="form-control" placeholder="数字ID" id="safeLane"
                                                   th:name="safeLane">
                                        </div>
                                        <div class="col-xs-2" style="color:#1a1a1a">
                                            <label for="midLane">二号位</label>
                                            <input type="text" class="form-control" placeholder="数字ID" id="midLane"
                                                   th:name="midLane">
                                        </div>
                                        <div class="col-xs-2" style="color:#1a1a1a">
                                            <label for="offLane">三号位</label>
                                            <input type="text" class="form-control" placeholder="数字ID" id="offLane"
                                                   th:name="offLane">
                                        </div>
                                        <div class="col-xs-2" style="color:#1a1a1a">
                                            <label for="support">四号位</label>
                                            <input type="text" class="form-control" placeholder="数字ID" id="support"
                                                   th:name="support">
                                        </div>
                                        <div class="col-xs-2" style="color:#1a1a1a">
                                            <label for="hardSupport">五号位</label>
                                            <input type="text" class="form-control" placeholder="数字ID" id="hardSupport"
                                                   th:name="hardSupport">
                                        </div>
                                        <div class="card-text">
                                            <button style="margin-top: 10px" class="btn btn-black btn-black-outline"
                                                    type="button" onclick="save()">提交
                                            </button>
                                        </div>
                                    </div>
                                </form>
                                <form>
                                    <div class="form-group">
                                        <label>Username</label>
                                        <input type="text" class="form-control" name="username" />
                                    </div>
                                    <div class="form-group">
                                        <label>Email address</label>
                                        <input type="text" class="form-control" name="email" />
                                    </div>
                                    <div class="form-group">
                                        <button type="submit" name="submit" class="btn btn-primary">Submit</button>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-xs-12 col-md-6 col-xl-12">
                    <div class="mbr-plan card text-xs-center">
                        <div class="mbr-plan-header card-block bg-primary">
                            <h2 class="mbr-plan-title">已报名战队展示</h2>
                        </div>
                        <div class="mbr-plan-list">
                            <div th:fragment="team_fresh" th:id="team_fresh_id">
                                <table class="table table-condensed" style="color: #1a1a1a">
                                    <thead>
                                    <tr>
                                        <th style="text-align: center">队名</th>
                                        <th style="text-align: center">一号位</th>
                                        <th style="text-align: center">二号位</th>
                                        <th style="text-align: center">三号位</th>
                                        <th style="text-align: center">四号位</th>
                                        <th style="text-align: center">五号位</th>
                                        <th style="text-align: center">操作</th>
                                    </tr>
                                    </thead>
                                    <tbody th:each="item : ${teamList}">
                                    <tr>
                                        <td th:text="${item.getName()}">XXX</td>
                                        <td th:text="${item.getSafeLane()}">XXX</td>
                                        <td th:text="${item.getMidLane()}">XXX</td>
                                        <td th:text="${item.getOffLane()}">XXX</td>
                                        <td th:text="${item.getSupport()}">XXX</td>
                                        <td th:text="${item.getHardSupport()}">XXX</td>
                                        <td>
                                            <div>
                                                <button th:value="${item.getId()}"
                                                        class="btn btn-black btn-black-outline"
                                                        type="button" onclick="del(this.value)">删除
                                                </button>
                                            </div>
                                        </td>
                                    </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <section class="mbr-section article" id="msg-box22-g" style="padding-top: 40px; padding-bottom: 20px;">
        <div class="mbr-overlay" style="background-color: #f4f4f4;">
        </div>
        <div class="container">
            <div class="row">
                <div class="col-md-8 col-md-offset-2 text-xs-center">
                    <p>Copyright 2020.AiHai Gaming All rights reserved.
                    </p>
                </div>
            </div>
        </div>
    </section>
    <!-- 模态框（Modal） -->
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal"
                            aria-hidden="true">×
                    </button>
                    <h4 class="modal-title" id="myModalLabel">
                        模态框（Modal）标题
                    </h4>
                </div>
                <div class="modal-body">
                    按下 ESC 按钮退出。
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default"
                            data-dismiss="modal">关闭
                    </button>
                    <button type="button" class="btn btn-primary">
                        提交更改
                    </button>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal-dialog -->
    </div><!-- /.modal -->
<!--    <script src="/static/js/valid.js"></script>-->
    <script>
        $('form').bootstrapValidator({
            message: 'This value is not valid',
            feedbackIcons: {
                valid: 'glyphicon glyphicon-ok',
                invalid: 'glyphicon glyphicon-remove',
                validating: 'glyphicon glyphicon-refresh'
            },
            fields: {
                username: {
                    message: '用户名验证失败',
                    validators: {
                        notEmpty: {
                            message: '用户名不能为空'
                        }
                    }
                },
                email: {
                    validators: {
                        notEmpty: {
                            message: '邮箱地址不能为空'
                        }
                    }
                }
            }
        });
    </script>
    <script src="/static/js/jquery.min.js"></script>
    <script src="/static/js/tether.min.js"></script>
    <script src="/static/js/bootstrap.min.js"></script>
    <script src="/static/js/smooth-scroll.js"></script>
    <script src="/static/js/script.min.js"></script>
    <script src="/static/js/jquery.touch-swipe.min.js"></script>
    <script src="/static/js/jquery.viewportchecker.js"></script>
    <script src="/static/js/jarallax.js"></script>
    <script src="/static/js/script.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/bootstrap-validator/0.5.3/js/bootstrapValidator.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/bootstrap-validator/0.5.3/js/bootstrapValidator.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/bootstrap-validator/0.5.3/js/language/zh_CN.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/bootstrap-validator/0.5.3/js/language/zh_CN.min.js"></script>
    <input name="animation" type="hidden">
</div>
</body>
</html>